<template>
  <div class="playerContent">
    <div class="title">
      <div class="line"></div>
      <div class="name">球员管理</div>
      <div class="add" @click="handleAdd">新增球员</div>
      <div class="btn">导出</div>
    </div>
    <div class="search">
      <div class="inputItem">
        <span>姓名</span>
        <CommonInput v-model="playerForm.name" placeholder="请输入球员名称" />
      </div>
      <div class="inputItem">
        <span>年级</span>
        <CommonSelect
          v-model="playerForm.classLevel"
          placeholder="请选择年级"
          :options="levelOptions"
        />
      </div>
      <div class="btns">
        <div class="btn searchBtn" @click="handleSearch">查询</div>
        <div class="btn resetBtn" @click="handleReset">重置</div>
        <div class="btn resetBtn" @click="handleDel">删除</div>
      </div>
    </div>
    <div class="content">
      <CommonTablePage
        style="flex: 1"
        :columns="playerColumns"
        :pagination="pageInfo"
        :tableData="tableData"
      >
        <template #edit="{ row }">
          <span @click="handleEdit(row)" class="edit">编辑</span>
        </template>
      </CommonTablePage>
    </div>
    <changeDialog
      v-if="changeDialog"
      :changeDialog.sync="changeDialog"
      :curRow="curRow"
    ></changeDialog>
  </div>
</template>
<script>
import { playerColumns } from "./column.js";
import { viewMinix } from "@/minix/viewMinix.js";
import changeDialog from "@/views/playerManage/components/changeDialog";
export default {
  components: {
    changeDialog,
  },
  mixins: [viewMinix],
  data() {
    return {
      curRow: {},
      changeDialog: false,
      playerColumns,
      tableData: [
        {
          id: "1",
          name: "张三",
          age: "23",
          height: "187",
          weight: "70kg",
          phone: "13018777666",
          classLevel: "大一",
          joinTime: "2021-09-09",
        },
      ],
      playerForm: {
        name: "",
        classLevel: "",
      },
      levelOptions: [
        {
          label: "大一",
          value: "0",
        },
        {
          label: "大二",
          value: "1",
        },
        {
          label: "大三",
          value: "2",
        },
        {
          label: "大四",
          value: "3",
        },
      ],
      rows: [],
    };
  },
  methods: {
    async getTableData() {},
    handleReset() {
      this.name = "";
      this.classLevel = "";
    },
    selRows(rows) {
      this.rows = rows;
    },
    handleDel() {
      if (this.rows.length < 1) {
        return this.$message({
          type: "error",
          message: "请勾选球员信息!",
        });
      }
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {});
    },
    handleAdd() {
      this.curRow = { id: "" };
      this.changeDialog = true;
    },
    handleEdit(row) {
      this.curRow = row;
      console.log(this.curRow);
      this.changeDialog = true;
    },
  },
};
</script>

<style lang="less" scoped>
.playerContent {
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    display: flex;
    align-items: center;
    height: 70px;
    padding: 10px;
    padding-left: 30px;
    background-color: #fff;
    font-weight: 600;
    border-radius: 5px;
    margin-bottom: 15px;
    .line {
      height: 20px;
      background-color: #fc7414;
      width: 6px;
      margin-right: 10px;
    }

    .btn {
      width: 68px;
      height: 32px;
      display: flex;
      font-size: 14px;
      background-color: #fc6c09;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }

    .add {
      margin-left: auto;

      margin-right: 16px;
      width: 68px;
      height: 32px;
      display: flex;
      font-size: 14px;
      background-color: #fc6c09;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
  }

  .search {
    height: 80px;
    margin-top: 15px;
    padding: 10px;
    padding-left: 30px;
    height: 80px;
    display: flex;
    align-items: center;
    background-color: #fff;

    .inputItem {
      display: flex;
      margin-right: 10px;
      span {
        width: 50px;
        display: flex;
        align-items: center;
      }
    }

    .btns {
      display: flex;

      .btn {
        width: 68px;
        height: 32px;
        display: flex;
        font-size: 14px;
        background-color: #fc6c09;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
      }
      .searchBtn {
        margin-right: 16px;
      }
      .resetBtn {
        margin-right: 16px;
      }
    }
  }

  .content {
    flex: 1;
    margin-top: 20px;
    display: flex;
    background-color: #fff;
    padding: 15px 10px 10px 30px;
    .edit {
      color: #fc6c09;
      cursor: pointer;
    }
  }
}
</style>
